<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title>移动端扭蛋抽奖</title>
  <script>
    const _baseApi = 'http://www.newbee66.com:8999'
  </script>
  <script src="../js/axios.1.4.0.min.js"></script>
  <script src="../js/axios-request.js"></script>
  <link rel="stylesheet" href="css/index.css">
  <script>
    !function (a, b) { function c() { var b = f.getBoundingClientRect().width; b / i > 750 && (b = 750 * i); var c = b / 7.5; f.style.fontSize = c + "px", k.rem = a.rem = c } var d, e = a.document, f = e.documentElement, g = e.querySelector('meta[name="viewport"]'), h = e.querySelector('meta[name="flexible"]'), i = 0, j = 0, k = b.flexible || (b.flexible = {}); if (g) { var l = g.getAttribute("content").match(/initial\-scale=([\d\.]+)/); l && (j = parseFloat(l[1]), i = parseInt(1 / j)) } else if (h) { var m = h.getAttribute("content"); if (m) { var n = m.match(/initial\-dpr=([\d\.]+)/), o = m.match(/maximum\-dpr=([\d\.]+)/); n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2))) } } if (!i && !j) { var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), q = a.devicePixelRatio; i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i } if (f.setAttribute("data-dpr", i), !g) if (g = e.createElement("meta"), g.setAttribute("name", "viewport"), g.setAttribute("content", "initial-scale=" + j + ", maximum-scale=" + j + ", minimum-scale=" + j + ", user-scalable=no"), f.firstElementChild) f.firstElementChild.appendChild(g); else { var r = e.createElement("div"); r.appendChild(g), e.write(r.innerHTML) } a.addEventListener("resize", function () { clearTimeout(d), d = setTimeout(c, 300) }, !1), a.addEventListener("pageshow", function (a) { a.persisted && (clearTimeout(d), d = setTimeout(c, 300)) }, !1), "complete" === e.readyState ? e.body.style.fontSize = 12 * i + "px" : e.addEventListener("DOMContentLoaded", function () { e.body.style.fontSize = 12 * i + "px" }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) { var b = parseFloat(a) * this.rem; return "string" == typeof a && a.match(/rem$/) && (b += "px"), b }, k.px2rem = function (a) { var b = parseFloat(a) / this.rem; return "string" == typeof a && a.match(/px$/) && (b += "rem"), b } }(window, window.lib || (window.lib = {}));
  </script>
</head>

<body>

<div class="niu_danji">
  <p id="location" style="color: red"></p>

  <!--机器-->
  <div class="game_qu">
    <div class="game_go">10/次</div>
    <div class="wdjifen"></div>
  </div>

  <!--球-->
  <div class="dan_gund">
    <span class="qiu_1 diaol_1"></span>
    <span class="qiu_2 diaol_2"> </span>
    <span class="qiu_3 diaol_3"></span>

    <span class="qiu_4 diaol_4"></span>
    <span class="qiu_5 diaol_5"></span>
    <span class="qiu_6 diaol_6"></span>

    <span class="qiu_7 diaol_7"></span>
    <span class="qiu_8 diaol_8"></span>


    <span class="qiu_9 diaol_9"></span>
    <span class="qiu_10 diaol_10"></span>
    <span class="qiu_11 diaol_11"></span>
  </div>

  <!--中奖掉落-->
  <div class="medon"><img src="images/mendong.png"></div>
  <div class="zjdl">
    <span></span>
  </div>
</div>


<!--中奖 获得一等奖-->
<div class="zonj_zezc none" id="jianpin_one">
  <div class="jpzs aiqiyi tc_anima">
    <em class="close"></em>
    <h2>
      <b style="font-size: 20px">今天吃
        <br>
      <b id="eat_what" style="font-size: 14px"></b>
        <br>
      <b id="eat_what_address" style="font-size: 14px"></b>
      </b>
    </h2>
  </div>
</div>

<!--中奖获得二等奖-->
<div class="zonj_zezc none" id="jianpin_two">
  <div class="jpzs aiqiyi tc_anima">
    <em class="close"></em>
    <h2>
      <b>恭喜你！<br>获得二等奖！</b>
    </h2>
  </div>
</div>

<!--中奖 获得三等奖-->
<div class="zonj_zezc none" id="jianpin_three">
  <div class="jpzs aiqiyi tc_anima">
    <em class="close"></em>
    <h2>
      <b>恭喜你！<br>获得三等奖！</b>
    </h2>
  </div>
</div>


<!--没有中奖-->
<div class="zonj_zezc none" id="jianpin_kong">
  <div class="jpzs aiqiyi tc_anima">
    <em class="close"></em>
    <h2>
      咦？没有抽中？
    </h2>
  </div>
</div>


<!--积分不足-->
<div class="zonj_zezc none" id="no_jifeng">
  <div class="jpzs aiqiyi tc_anima">
    <em></em>
    <h2>
      对不起，积分不足！
    </h2>
  </div>
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=eb12b1d15e4e3d6cb45b567c6a9b26fa"></script>

<script>
  $(function () {
    var score = 1000;
    var flag = true; // 节流阀 控制不能连续点击
    $(".wdjifen").html(score);

    // 点击扭蛋机抽奖时获取用户经纬度，并执行抽奖逻辑
    $(".game_go").click(function () {
      if (flag) {
        flag = false;
        // 获取用户位置信息
       console.log(navigator.geolocation.getCurrentPosition);
        if (navigator.geolocation) {          
          navigator.geolocation.getCurrentPosition(function (position) {
            // 在页面上显示经纬度信息
            document.getElementById("location").innerHTML = "您的位置：" +"";

            score -= 10;
            if (score < 0) {
              for (i = 1; i <= 11; i++) {
                $(".qiu_" + i).removeClass("wieyi_" + i);
              }
              $("#no_jifeng").show();
            } else {
              draw();
            }
          }, function () {
            // 处理获取位置信息失败时的情况
            handleGeolocationError();
          });
          // console.log("请求已发送");
          request.get(`/eat?longitude=120.043365&latitude=30.296519`/*, { data }*/).then((res) => {
            if (res) {
              console.log(res);
              // console.log(JSON.stringify(res));
             if(!res.data){
               document.getElementById("eat_what").innerHTML = "吃个屁吃，数据没拿到";
               document.getElementById("eat_what_address").innerHTML = "";
             }else{
               document.getElementById("eat_what").innerHTML = res.data.name;
               document.getElementById("eat_what_address").innerHTML = res.data.address;
             }

            } else {
              alert(msg)
            }
          })
        } else {
          // 处理浏览器不支持 Geolocation API 的情况
          document.getElementById("location").innerHTML = "您的浏览器不支持定位功能。";
          score -= 10;
          if (score < 0) {
            for (i = 1; i <= 11; i++) {
              $(".qiu_" + i).removeClass("wieyi_" + i);
            }
            $("#no_jifeng").show();
          } else {
            draw();
          }
        }
      }
    });

    //抽奖逻辑
    function draw() {
      var number = Math.floor(4 * Math.random() + 1); // 随机中奖号码 number标识
      for (i = 1; i <= 11; i++) {
        $(".qiu_" + i).addClass("wieyi_" + i);
      }

      setTimeout(function () {
        for (i = 1; i <= 11; i++) {
          $(".qiu_" + i).removeClass("wieyi_" + i);
        }
      }, 1100);

      setTimeout(function () {
        // switch (number) {
        switch (1) {
          case 1: $(".zjdl").children("span").addClass("diaL_one"); break;
          case 2: $(".zjdl").children("span").addClass("diaL_two"); break;
          case 3: $(".zjdl").children("span").addClass("diaL_three"); break;
          case 4: $(".zjdl").children("span").addClass("diaL_four"); break;
        }
        $(".zjdl").removeClass("none").addClass("dila_Y");
        setTimeout(function () {
          // switch (number) {
          switch (1) {
            case 1: $("#jianpin_one").show(); break;
            case 2: $("#jianpin_two").show(); break;
            case 3: $("#jianpin_three").show(); break;
            case 4: $("#jianpin_kong").show(); break;
          }
        }, 900);
      }, 3000)

      setTimeout(function () {
        $(".zjdl").addClass("none").removeClass("dila_Y");
        $(".wdjifen").html(score);
        $(".zjdl").children("span").removeAttr('class');
        flag = true;
      }, 3500)
    }

    // 添加对 Geolocation API 获取位置信息失败时的处理
    function handleGeolocationError() {
      document.getElementById("location").innerHTML = "无法获取您的位置信息。";
      score -= 10;
      if (score < 0) {
        for (i = 1; i <= 11; i++) {
          $(".qiu_" + i).removeClass("wieyi_" + i);
        }
        $("#no_jifeng").show();
      } else {
        draw();
      }
    }

    $('.close').click(function () {
      $('.zonj_zezc').fadeOut();
    });
  });
</script>

</body>

</html>
